import React, { Component } from 'react';
import Ajax from '../common/Ajax';
import classNames from 'classnames';
import {
  Row,
  Col,
  Button,
  Input,
  Table,
  Modal,
  Form
} from 'antd';
const InputGroup = Input.Group;
const FormItem = Form.Item;
const createForm = Form.create;
const SearchInput = React.createClass({
  getInitialState() {
    return {
      value: '',
      focus: false,
    };
  },
  handleInputChange(e) {
    this.setState({
      value: e.target.value,
    });
  },
  handleFocusBlur(e) {
    this.setState({
      focus: e.target === document.activeElement,
    });
  },
  handleSearch() {
    if (this.props.onSearch) {
      this.props.onSearch(this.state.value);
    }
    this.props.listUser();
  },
  render() {
    const { style, size, placeholder } = this.props;
    const btnCls = classNames({
      'ant-search-btn': true,
      'ant-search-btn-noempty': !!this.state.value.trim(),
    });
    const searchCls = classNames({
      'ant-search-input': true,
      'ant-search-input-focus': this.state.focus,
    });
    return (
      <div className="ant-search-input-wrapper" style={style}>
        <InputGroup className={searchCls}>
          <Input placeholder={placeholder} value={this.state.value} onChange={this.handleInputChange}
                 onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} onPressEnter={this.handleSearch}
          />
          <div className="ant-input-group-wrap">
            <Button className={btnCls} size={size} onClick={this.handleSearch}>搜索</Button>
          </div>
        </InputGroup>
      </div>
    );
  },
});

const columns = [{
  title: '用户昵称',
  dataIndex: 'userNick',
  key: 'userNick',
}, {
  title: '唯一Code',
  dataIndex: 'code',
  key: 'code',
}, {
  title: '密钥',
  dataIndex: 'sign',
  key: 'sign',
}];


let AddUserModal = React.createClass({
  getInitialState() {
    return { visible: false };
  },

  handleSubmit() {
    console.log(JSON.stringify(this.props));
    var formobj = this.props.form.getFieldsValue();
    var url = "http://127.0.0.1/user/addUser?code="+formobj.code+"&userNick="+formobj.userNick+"&sign="+formobj.sign;
    Ajax("GET",url, function(result) {

      if(result.error!=null){
        return;
      }
      this.props.listUser();

    }.bind(this));
    this.hideModal();
  },

  showModal() {
    this.setState({ visible: true });
  },

  hideModal() {
    this.setState({ visible: false });
  },

  render() {
    const { getFieldProps } = this.props.form;

    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
    };
    return (
      <div>
        <Button type="primary" onClick={this.showModal} icon="plus">增加用户</Button>
        <Modal title="增加用户" visible={this.state.visible} onOk={this.handleSubmit} onCancel={this.hideModal}>
          <Form horizontal form={this.props.form}>
            <FormItem
              {...formItemLayout}
              label="用户昵称"
            >
              <Input {...getFieldProps('userNick', {})} type="text" autoComplete="off" />
            </FormItem>
            <FormItem {...formItemLayout} label="唯一CODE">
              <Input placeholder="请输入唯一CODE" type="text" {...getFieldProps('code', {})} autoComplete="off"/>
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="签名密钥"
            >
              <Input {...getFieldProps('sign', {})} type="sign" autoComplete="off" />
            </FormItem>
          </Form>
        </Modal>
      </div>
    );
  },
});

AddUserModal = createForm()(AddUserModal);


export default class UserManger extends Component {
  constructor(){
    super();
    this.state = {dataSource:[]};
    this.listUser = this.listUser.bind(this);
    this.listUser();
  }
  listUser(){
    Ajax("GET","http://127.0.0.1/user/listUser", function(result) {
      if(result.error!=null){
        return;
      }
      this.setState({dataSource:result});
    }.bind(this));
  }
  render() {
    console.log("render"+JSON.stringify(this.state.dataSource));
    return(
      <div >
        <Row className="user-page">
          <Col span={12}>
            <AddUserModal listUser={this.listUser}/>
          </Col>
          <Col span={12}>
            <Row type="flex" align="middle" justify="end">
              <SearchInput placeholder="input search text" listUser={this.listUser}
                           onSearch={value => console.log(value)} style={{ width: 200 }}
              />
            </Row>
          </Col>
        </Row>
        <Row>
          <Table dataSource={this.state.dataSource} columns={columns} bordered/>
        </Row>
      </div>
    )
  }
}

